/* 
    搜索历史

    1.添加历史记录
    2.展示历史记录
    3.删除历史记录=>删除状态,删除;非删除状态,执行搜索操作
    4.数据持久化
 */
<template>
    <div class="searchHistoryMain">
        <van-cell title="搜索历史">
            <div v-if="isDeleteShow">
                <span @click="$emit('clearSearchHistories',[])">全部删除</span>&nbsp;&nbsp;
                <span @click="isDeleteShow = false">完成</span>
            </div>

            <van-icon v-else name="delete-o" @click="isDeleteShow = true" />
        </van-cell>
        <van-cell v-for="(item, index) in searchHistories" :key="index" :title="item"
            @click="handleSearchHistories(item, index)">
            <van-icon v-if="isDeleteShow" name="close" />
        </van-cell>
    </div>
</template>

<script>
export default {
    name: 'SearchHistory',
    props: {
        /* 
          受父组件数据影响

          如果是普通数据(数字,字符串,布尔值)绝对不能修改=>改了也不会传导给父组件

          如果是引用类型数据(数组,对象),可以修改([].push),不能重新赋值(xx=[])
        */
        searchHistories: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            isDeleteShow: false,//是否为删除状态
        }
    },
    watch: {

    },
    created() {

    },
    methods: {
        // 搜索历史单元格点击事件
        handleSearchHistories(val, index) {
            if (this.isDeleteShow) {
                // 1.删除状态,删除
                this.searchHistories.splice(index, 1)
            } else {
                // 2.非删除状态,执行搜索操作
                this.$emit('search', val)
            }
        },
    }
}
</script>

<style scoped lang="less">
.searchHistoryMain {
    width: 100%;
    height: 100%;
}
</style>